<template>
  <div class="edit">
  	<router-link :to="{name:'WordEdit'}">
			 <a class="button bg-blue"><span>vue实现word编辑</span></a> 
  	</router-link>
  	<router-link :to="{name:'ExcelEdit'}">
			<a class="button bg-orange"><span>vue实现excel编辑</span></a> 
  	</router-link>	
  </div>
</template>

<script>
	export default {
	  name: 'HelloWorld',
	  data () {
	    return {
	    	
	    }
	  },
	  mounted () {
	    // $router和$route的区别
	    console.log(this.$router)
	    console.log(this.$route)
	  }
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.button {
	width: 9.5em;
	display: block;
	border-radius: 6px;
	padding: .48em .8em;
	text-shadow: rgba(0,0,0,.5) 0px -1px 0px;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	margin: 50px;
	}
	.bg-blue {
		background-color: #64a8a6;
		color: #dafffe;
		box-shadow: 0px 0px 0px 1px #4e8381 inset, 0px 0px 0px 2px #74b6b4 inset, 0px 4px 0px 0px #4a7c7b, 0px 5px 0px 0px #355655, 0px 8px 0px 0px rgba(0,0,0,.15);
	}
	.bg-blue:hover {
		background-color: #73c2c0;
	}
	.bg-orange {
		background-color: #e65440;
		color: #ffdada;
		box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 4px 0px 0px #a53c2e, 0px 5px 0px 0px #7e2e23, 0px 8px 0px 0px rgba(0,0,0,.15);
	}
	.bg-orange:hover {
		background-color: #f15843;
	}
	a{
		text-decoration: none;
	}
</style>
